import { Card, CardBody, CardHeader } from '@heroui/card';
import { Button, Form, Input } from '@heroui/react';
import React from 'react';
import { userRegistry } from '@/services/user/api';
import { Image } from '@heroui/image';
import loginImgSrc from '../../../assets/img/login.png'
import { message } from 'antd';
import { useNavigate } from '@umijs/max';

const UserRegistryView: React.FC = () => {
  const navigate=useNavigate()
  const registry= async(data: UserRegisterDTO) =>{
    let res = await userRegistry(data);
    if(res.code!==0){
      message.info("注册失败:"+ res.data);
      return;
    }
    navigate("/user/login");

  }


  return (
    <>
      <Image src={loginImgSrc} alt="HeroUI hero Image with delay"
             className='w-full h-full z-0 '/>
      <Card className="w-full self-center absolute shadow-large max-w-md z-10 opacity-75 bg-opacity-100 hover:opacity-100"
      style={{top: '30%',bottom: '70%'}}>
        <CardHeader className="w-full flex gap-3 justify-center">
          <h4 className="text-large">注册</h4>
        </CardHeader>
        <CardBody>
          <Form className=" w-full max-w-md flex flex-col gap-4 justify-center self-center"
                onSubmit={async (e) => {
                  e.preventDefault();
                  let data = Object.fromEntries(new FormData(e.currentTarget)) as UserRegisterDTO;
                  await registry(data);
                }}
          >
            <Input
              className="max-w-md"
              isRequired
              errorMessage="账号不能为空"
              label="账号"
              labelPlacement="outside"
              name="userAccount"
              placeholder="输入你的账号"
              type="text"
            />

            <Input
              isRequired
              className=" max-w-md"
              errorMessage="密码不能为空"
              label="密码"
              labelPlacement="outside"
              name="userPassword"
              placeholder="输入你的密码"
              type="password"
            />
            <Input
              isRequired
              className=" max-w-md"
              errorMessage="密码不能为空"
              label="确认密码"
              labelPlacement="outside"
              name="checkPassword"
              placeholder="再次输入与你的密码"
              type="password"
            />
            <div className="w-full flex gap-2 justify-center">
              <Button color="primary" type="submit">
                注册
              </Button>
              <Button type="reset" variant="flat">
                重置
              </Button>
            </div>
          </Form>
        </CardBody>
      </Card>

    </>
  )
};
export default UserRegistryView;
